<template>
    <NFlex justify="flex-end">
        <NButton type="primary" size="small" @click="showCreate">创建消息类型</NButton>
    </NFlex>
    <NDataTable class="mt-4" :columns="columns" :data="list" :loading="loading"></NDataTable>
    <MessageTypeCreate v-model="createVisible" :item="item" @refresh="queryData" />
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import { NImage, NFlex, NButton, type DataTableColumns } from 'naive-ui'
import { queryMessageTypeList } from '@/api/content'
import MessageTypeCreate from './MessageTypeCreate.vue'

const columns: DataTableColumns<Api.Content.MessageType> = [
    {
        title: 'id',
        key: 'id'
    },

    {
        title: '通知Icon',
        key: 'icon',
        render: row => {
            return <NImage width={100} src={row.icon}></NImage>
        }
    },

    {
        title: '简体',
        key: 'name'
    },

    {
        title: '繁体',
        key: 'nameZh'
    },

    {
        title: '英文',
        key: 'nameEn'
    },
    {
        title: '操作',
        key: 'operator',
        render: row => (
            <NFlex>
                <NButton size="small" onClick={() => edit(row)}>
                    编辑
                </NButton>
            </NFlex>
        )
    }
]

const loading = ref(false)
const list = ref<Api.Content.MessageTypeList>([])
async function queryData() {
    loading.value = true
    const [err, res] = await queryMessageTypeList()
    loading.value = false
    if (!err && res) {
        list.value = res
    }
}

queryData()

const createVisible = ref(false)
function showCreate() {
    createVisible.value = true
}

const item = ref<Api.Content.MessageType | null>(null)
function edit(row: Api.Content.MessageType) {
    item.value = row
    createVisible.value = true
}
</script>
